<script lang="ts" setup>
import { ref, onMounted } from "vue";



let flag = ref<boolean>(false);



// 获取数据
import { getUserInfo,addUserInfo,deleteUserInfo,getUserInfoId,updateUserInfo} from "../../api/index.js";
let data = ref([]);

onMounted(() => {
    get()
});

function get(){
    getUserInfo().then((res: any) => {
      console.log(res);
      
    return data.value =Object.values(res)
  });
}

//添加弹框
const dialogVisible = ref<boolean>(false);
  let usefrom=ref({
  
})
let title=ref('')
let adv_type=ref(1)
let img_path=ref('')
let sort=ref('')
let goods_id=ref('')
let ids=ref('')
   
//图片上传
import { Plus } from "@element-plus/icons-vue";
const imageUrl = ref("");
let handleAvat = (e: any) => {
  let filedata = e.raw;
  img_path.value = filedata;
  // 创建fliereader对象
  
  const reader = new FileReader();
  reader.onload=()=>{
    imageUrl.value = reader.result as string;
   img_path.value = reader.result as string;
  }
  reader.readAsDataURL(filedata);
 
};



//分页
const currentPage4 = ref(4);

const pageSize4 = ref(100);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};







// //添加功能
let add=()=>{
        let obj={
            title:title.value,
            adv_type:adv_type.value,
            img_path:img_path.value,
            sort:sort.value,
            goods_id:goods_id.value
        }
    addUserInfo(obj).then((res:any)=>{
        get()
        dialogVisible.value=false;
    })
}
// //删除功能
const handleDelete = (index: number, row:any) => {

    deleteUserInfo(row.id).then((res:any)=>{
      console.log(res);
        get()
    })
};

// //回显功能
const handleEdit = (index: number, row :any) => {

  flag.value=true
  getUserInfoId(row.id).then((res:any)=>{
      title.value=res.title
      adv_type.value=res.adv_type
      imageUrl.value=res.img_path
      sort.value=res.sort
      goods_id.value=res.goods_id
      ids.value=res.id


  })
  
};

//修改功能
let xiu=()=>{
    let obj={
        title:title.value,
        adv_type:adv_type.value,
        img_path:img_path.value,
        sort:sort.value,
        goods_id:goods_id.value,
        id:ids.value
    }
    updateUserInfo(obj).then((res:any)=>{
     console.log(res);
     
        get()
        flag.value=false
    })
}

</script>

<template>
  <!-- 搜索功能 -->

  <div>
    <el-input type="text" style="width: 240px" placeholder="请输入标题" />
    <el-select style="width: 240px">
      <el-option>启用</el-option>
      <el-option>禁用</el-option>
    </el-select>
    <el-button>
        搜索
    </el-button>
    <el-button>
        重置
    </el-button>
  </div>

  <!-- 添加广告 -->
  <el-button @click="dialogVisible = true">添加广告</el-button>

  <!-- 表格 -->
  <div class="main">
    <el-table :data="data" style="width: 100%">
      <el-table-column label="id" prop="id" />

      <el-table-column label="标题" prop="title" />

      <el-table-column label="图片"  #default="scope">
        <img
          :src="scope.row.img_path"
          style="width: 100px; height: 100px"
          alt=""
        />
      </el-table-column>

      <el-table-column label="排序" prop="sort" />
      <el-table-column label="是否启用" prop="status" #default="scope">
        <el-switch
          v-model="scope.row.status"
          
          :active-value="1"
          :inactive-value="2"
        />
      </el-table-column>

      <el-table-column align="right" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 添加弹框 -->
  <div>
    <el-dialog v-model="dialogVisible" title="添加信息" width="800">
      <span>
          <!-- 位置类型 -->
          <div>
          位置类型：
          <el-select style="width: 240px" v-model="adv_type">
            <el-option :value="1" label="首页">首页</el-option>
            <el-option :value="2" label="栏目">栏目</el-option>
            <el-option :value="3" label="单品">单品</el-option>
            <el-option :value="4" label="登录">登录</el-option>
          </el-select>
        </div>
        <!-- 广告标题 -->
        <div>
          广告标题：<el-input
            placeholder="请输入标题"
            style="width: 650px"
            v-model="title"
          />
        </div>
        <!-- 广告图片 -->
        <div>
          <el-upload
            class="avatar-uploader"
            :auto-upload="false"
            @change="handleAvat($event)"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar"  style="width: 100px; height: 100px;"/>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      
        <!-- 广告排序 -->
        <div>
          广告排序： <el-input-number v-model="sort" :min="1" :max="100" />
        </div>
        <!-- 关联商品id -->
        <div>
          goods_id:<el-input placeholder="请输入关联id" style="width: 650px" v-model="goods_id"/>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>


    <!-- 修改弹框 -->
    <div>
    <el-dialog v-model="flag" title="修改信息" width="800">
      <span>
          <!-- 位置类型 -->
          <div>
          位置类型：
          <el-select style="width: 240px" v-model="adv_type">
            <el-option :value="1" label="首页">首页</el-option>
            <el-option :value="2" label="栏目">栏目</el-option>
            <el-option :value="3" label="单品">单品</el-option>
            <el-option :value="4" label="登录">登录</el-option>
          </el-select>
        </div>
        <!-- 广告标题 -->
        <div>
          广告标题：<el-input
            placeholder="请输入标题"
            style="width: 650px"
            v-model="title"
          />
        </div>
        <!-- 广告图片 -->
        <div>
          <el-upload
            class="avatar-uploader"
            :auto-upload="false"
            @change="handleAvat($event)"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar"   style="width: 100px; height: 100px;"/>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      
        <!-- 广告排序 -->
        <div>
          广告排序： <el-input-number v-model="sort" :min="1" :max="100" />
        </div>
        <!-- 关联商品id -->
        <div>
          goods_id:<el-input placeholder="请输入关联id" style="width: 650px" v-model="goods_id"/>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="flag = false">取消</el-button>
          <el-button type="primary" @click="xiu">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>



  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>
